import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import React from "react";
import { ConfigStepContainer, StyledConfigRow } from "./index.style";
import ButtonConfig from "../ComponentsConfig/ButtonConfig";
import FormInputConfig from "../ComponentsConfig/FormInputConfig";
import SelectConfig from "../ComponentsConfig/SelectConfig";

var ConfigStepOne = function ConfigStepOne(_ref) {
  var config = _ref.config,
      onChange = _ref.onChange;

  var handleChange = function handleChange(name, value) {
    var result = {};

    if (name === "input") {
      result = _objectSpread({}, value, {
        select: value.input
      });
    } else if (name === "select") {
      result = _objectSpread({
        input: value.select
      }, value);
    } else {
      result = _objectSpread({}, value);
    }

    if (onChange) {
      onChange(result);
    }
  };

  return React.createElement(ConfigStepContainer, {
    className: "config-step-container"
  }, React.createElement(StyledConfigRow, null, React.createElement(ButtonConfig, {
    value: {
      button: config.button,
      buttonMotion: config.buttonMotion,
      buttonMotion2: config.buttonMotion2
    },
    onChange: function onChange(e) {
      return handleChange("button", e);
    }
  })), React.createElement(StyledConfigRow, null, React.createElement(FormInputConfig, {
    value: {
      input: config.input,
      inputMotion: config.inputMotion,
      formColor: config.formColor
    },
    onChange: function onChange(e) {
      return handleChange("input", e);
    }
  })), React.createElement(StyledConfigRow, null, React.createElement(SelectConfig, {
    value: {
      select: config.select,
      inputMotion: config.inputMotion,
      dropdownMotion: config.dropdownMotion
    },
    onChange: function onChange(e) {
      return handleChange("select", e);
    }
  })));
};

export default ConfigStepOne;